<template>
  <div class="my_screen_page dian_wang">

    <my-header title="广西电网公司" />

    <div class="mt32 pl20 pr20 df jcsb">

      <div class="w824">

        <!-- 工业用电 -->
        <div class="dian_area_block_1">
          <div class="df aic jcc">
            <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
            <div class="page_title_text">工业用电</div>
            <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
          </div>

          <div class="scroll_box_1">
            <ul class="table_data_list">
              <vue3SeamlessScroll :list="list1" :hover="true" :step="0.2">
                <li class="item_data_box" v-for="(item, index) in list1" :key="item.id">
                  <div class="param_box_flex flex_box aic">
                    <img src="@/assets/images/dataCenter/icon_01.png" class="img_2 mr10" v-if="item.icon" alt="" />
                    <div class="item ov">
                      <div class="fwb clamp_1">{{ item.name }}</div>
                    </div>
                    <div class="w232"><span class="fz24 fwb text_font_DIN">{{ item.value }}</span><span
                        class="fz14 cor_777">{{ item.unit }}</span></div>
                    <div class="w80 tar"><span class="fz24 fwb cor_00F text_font_DIN">{{ item.percent }}</span></div>
                  </div>
                </li>
              </vue3SeamlessScroll>
            </ul>
          </div>

        </div>

        <!-- 服务业用电 -->
        <div class="mt40 dian_area_block_2">
          <div class="df aic jcc">
            <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
            <div class="page_title_text">服务业用电</div>
            <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
          </div>

          <div class="scroll_box_2">
            <ul class="table_data_list">
              <vue3SeamlessScroll :list="list2" :hover="true" :step="0.2">
                <li class="item_data_box" v-for="(item, index) in list2" :key="item.id">
                  <div class="param_box_flex flex_box aic">
                    <img src="@/assets/images/dataCenter/icon_01.png" class="img_2 mr10" v-if="item.icon" alt="" />
                    <div class="item ov">
                      <div class="fwb clamp_1">{{ item.name }}</div>
                    </div>
                    <div class="w232"><span class="fz24 fwb text_font_DIN">{{ item.value }}</span><span
                        class="fz14 cor_777">{{ item.unit }}</span></div>
                    <div class="w80 tar"><span class="fz24 fwb cor_00F text_font_DIN">{{ item.percent }}</span></div>
                  </div>
                </li>
              </vue3SeamlessScroll>
            </ul>
          </div>

        </div>

        <!-- 农林牧渔用电 -->
        <div class="mt40 dian_area_block_1">
          <div class="df aic jcc">
            <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
            <div class="page_title_text">农林牧渔用电</div>
            <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
          </div>

          <div class="scroll_box_1">
            <ul class="table_data_list">
              <vue3SeamlessScroll :list="list1" :hover="true" :step="0.2">
                <li class="item_data_box" v-for="(item, index) in list1" :key="item.id">
                  <div class="param_box_flex flex_box aic">
                    <img src="@/assets/images/dataCenter/icon_01.png" class="img_2 mr10" v-if="item.icon" alt="" />
                    <div class="item ov">
                      <div class="fwb clamp_1">{{ item.name }}</div>
                    </div>
                    <div class="w232"><span class="fz24 fwb text_font_DIN">{{ item.value }}</span><span
                        class="fz14 cor_777">{{ item.unit }}</span></div>
                    <div class="w80 tar"><span class="fz24 fwb cor_00F text_font_DIN">{{ item.percent }}</span></div>
                  </div>
                </li>
              </vue3SeamlessScroll>
            </ul>
          </div>

        </div>

      </div>

      <div class="w1672">

        <div class="df jcsb">

          <div class="w824">

            <!-- 总体情况 -->
            <div class="dian_area_block_3">
              <div class="df aic jcc">
                <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
                <div class="page_title_text">总体情况</div>
                <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
              </div>

              <div class="scroll_box_3">
                <ul class="table_data_list">
                  <vue3SeamlessScroll :list="list3" :hover="true" :step="0.2">
                    <li class="item_data_box" v-for="(item, index) in list3" :key="item.id">
                      <div class="param_box_flex flex_box aic">
                        <img src="@/assets/images/dataCenter/icon_01.png" class="img_2 mr10" v-if="item.icon" alt="" />
                        <div class="item ov">
                          <div class="fwb clamp_1">{{ item.name }}</div>
                        </div>
                        <div class="w232"><span class="fz24 fwb text_font_DIN">{{ item.value }}</span><span
                            class="fz14 cor_777">{{ item.unit }}</span></div>
                        <div class="w80 tar"><span class="fz24 fwb cor_00F text_font_DIN">{{ item.percent }}</span>
                        </div>
                      </div>
                    </li>
                  </vue3SeamlessScroll>
                </ul>
              </div>

            </div>

          </div>

          <div class="w824">

            <!-- 能源生产 -->
            <div class="dian_area_block_3">
              <div class="df aic jcc">
                <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
                <div class="page_title_text">能源生产</div>
                <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
              </div>

              <div class="scroll_box_3">
                <ul class="table_data_list">
                  <vue3SeamlessScroll :list="list3" :hover="true" :step="0.2">
                    <li class="item_data_box" v-for="(item, index) in list3" :key="item.id">
                      <div class="param_box_flex flex_box aic">
                        <img src="@/assets/images/dataCenter/icon_01.png" class="img_2 mr10" v-if="item.icon" alt="" />
                        <div class="item ov">
                          <div class="fwb clamp_1">{{ item.name }}</div>
                        </div>
                        <div class="w232"><span class="fz24 fwb text_font_DIN">{{ item.value }}</span><span
                            class="fz14 cor_777">{{ item.unit }}</span></div>
                        <div class="w80 tar"><span class="fz24 fwb cor_00F text_font_DIN">{{ item.percent }}</span>
                        </div>
                      </div>
                    </li>
                  </vue3SeamlessScroll>
                </ul>
              </div>

            </div>

          </div>

        </div>

        <!-- 各地市用电情况图表 -->
        <div class="mt24 dian_area_block_4">

          <div class="df aic jcc">
            <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
            <div class="page_title_text">各地市用电情况图表</div>
            <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
          </div>

          <div class="mt40 chart_size_dian">
            <chart-bar-or-line-three :chartData="lineData1"></chart-bar-or-line-three>
          </div>

        </div>

      </div>

    </div>

  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import chartBarOrLineThree from '@/components/chartBarOrLineThree.vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';

const list1 = reactive([
  { id: 1, name: '工业用电量', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: false },
  { id: 2, name: '工业用电量', value: '768.59', unit: '亿千瓦时', percent: '5.26%', icon: true },
  { id: 3, name: '工业用电量', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: false }
])

const list2 = reactive([
  { id: 1, name: '批发和零售业用电里', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: false },
  { id: 2, name: '租赁和商务服务业用电量', value: '768.59', unit: '亿千瓦时', percent: '5.26%', icon: false },
  { id: 3, name: '公共服务及管理组织用电里', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: false },
  { id: 4, name: '金融业用电里', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: false },
  { id: 5, name: '住宿和餐饮业用电里', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: false },
  { id: 6, name: '房地产业用电量', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: false },
  { id: 7, name: '信息传输、软件和信息技术服务业用电里', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: false },
  { id: 8, name: '交通运输、仓储和邮政业用电里', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: false },
  { id: 9, name: '公共服务及管理组织用电里', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: false },
  { id: 10, name: '金融业用电里', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: false }
]);

const list3 = reactive([
  { id: 1, name: '全社会用电量', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: false },
  { id: 2, name: '第一产业用电量', value: '768.59', unit: '亿千瓦时', percent: '5.26%', icon: true },
  { id: 3, name: '第一产业用电量', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: true },
  { id: 4, name: '第一产业用电量', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: true },
  { id: 5, name: '第一产业用电量', value: '894.47', unit: '亿千瓦时', percent: '4.01%', icon: true }
]);

const lineData1 = reactive({
  title: '全社会用电量',
  datas:[
    [2,6,4,7,2,5,8,4,7,2,5,8,2,6],
    [5,6,4,7,2,4,6,4,7,2,4,6,5,6]
  ],
  dataX: ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市']
})

</script>

<style lang="scss" scoped>

.dian_wang {

  .dian_area_block_1 {
    position: relative;
    padding: 40px 40px 0;
    width: 100%;
    height: 288px;
    background: url('@/assets/images/dataCenter/dian_area_1.png') no-repeat;
    background-size: 100%;
  }

  .dian_area_block_2 {
    position: relative;
    padding: 40px 40px 0;
    width: 100%;
    height: 792px;
    background: url('@/assets/images/dataCenter/dian_area_2.png') no-repeat;
    background-size: 100%;
  }

  .dian_area_block_3 {
    position: relative;
    padding: 40px 40px 0;
    width: 100%;
    height: 540px;
    background: url('@/assets/images/dataCenter/dian_area_3.png') no-repeat;
    background-size: 100%;
  }

  .dian_area_block_4 {
    position: relative;
    padding: 40px 40px 0;
    width: 100%;
    height: 884px;
    background: url('@/assets/images/dataCenter/dian_area_4.png') no-repeat;
    background-size: 100%;
  }

  .scroll_box_1, .scroll_box_2, .scroll_box_3 {
    position: relative;
    height: 152px;
    overflow: hidden;
    margin-top: 24px;
  }

  .scroll_box_2 {
    height: 656px;
  }

  .scroll_box_3 {
    height: 404px;
  }

  .table_data_list {
    position: relative;
    .item_data_box {
      position: relative;
      padding: 0 16px;
      height: 68px;
      background: rgba(2,20,37,0.9);
      box-shadow: inset 0px 0px 8px 0px rgba(43,141,191,0.6);
      border-radius: 8px;
      margin-bottom: 16px;
      .param_box_flex {
        position: relative;
        height: 100%;
        font-size: 16px;
        color: #fff;
      }
    }
  }

  .chart_size_dian {
    position: relative;
    width: 100%;
    height: 721px;
  }

}

</style>